
<template>
    <div>
      <div style="position: fixed;top: 555px;right: 18px;">
        <el-button @click="toSaveCanvas" icon="el-icon-check" style="font-size:20px" type="success" circle></el-button>
      </div>
        
        <canvas ref="canvas" id="canvas" style="margin-top:20px"></canvas>
    </div>
</template>
 
<script>
  export default {
    data(){
      return{
        //dialogVisible:false,
        canvas:null,
        ctx:null,
        drawing:false,
        saveMap:{
          baseUrl:"",
        },
        image:new Image(),
         dataForm: {
          id: 0,
          image: '',
          resumeId: ''
        },
      }
    },
    mounted() {
      this.initCanvas();
      // 当调整窗口大小时重绘canvas
      window.onresize = () => {
        this.initCanvas()
      }
    },
    methods: {
      initCanvas() {
        console.log("初始化canvas")
        this.canvas = document.getElementById('canvas');
        this.ctx = canvas.getContext('2d');
        this.canvas.width = window.innerWidth
        this.canvas.height = window.innerHeight
        this.canvas.addEventListener("mousedown",(e)=>{
          this.drawing = true;
          console.log(123,e)
          this.ctx.beginPath()
          this.ctx.moveTo(e.offsetX,e.offsetY)
        })
        this.canvas.addEventListener("mouseup",(e)=>{
          this.drawing = false;
        })
  
        this.canvas.addEventListener("mousemove",(e)=>{
          if(this.drawing == true){        
            this.ctx.lineWidth = 5;
            this.ctx.strokeStyle = "#ff4444";
            this.ctx.lineTo(e.offsetX,e.offsetY)
            this.ctx.stroke()
          }  
        })
      },
      drawImage(image,width,height){
          const bgImg = new Image();
          bgImg.src = image;
          this.ctx.drawImage(bgImg,10,10,width,height);
          this.ctx.stroke();
      },
      toImage(){
        this.saveMap.baseUrl=this.$refs.canvas.toDataURL("image/jpeg", 1);
        console.log(this.saveMap);
        this.$http({
            url: this.$http.adornUrl(`/resume/diction/file/base64UploadImage`),
            method: 'post',
            data: this.$http.adornData({
                "baseUrl":this.saveMap.baseUrl
            })
          }).then(({data}) => {
            if(data.imageUrl!=null){
              alert("保存成功！！！");
              localStorage.setItem("image",data.imageUrl);
    
                this.imageExamine();
            }
          })
      },
      imageExamine(){
          var image=localStorage.getItem("image");
          var resumeId=localStorage.getItem("resumeId");
        
           this.$http({
            url: this.$http.adornUrl(`/resume/image/examine/examinImage`),
            method: 'post',
            data: this.$http.adornData({
            'id': this.dataForm.id || undefined,
            'image': image,
            'resumeId': resumeId
          })
          }).then(({data}) => {
                 location.reload();
          })

      },
      drawSmile() {
        this.ctx.beginPath();
        this.ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
        this.ctx.moveTo(110, 75);
        this.ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
        this.ctx.moveTo(65, 65);
        this.ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
        this.ctx.moveTo(95, 65);
        this.ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
        this.ctx.stroke();
      },
      toSaveCanvas(){
            this.toImage();
      },
    }
  }
  </script>
<style>
  .canvas {
    width: 100vw;
    height: 100vh;
  }
</style>
  
